<script setup lang="ts">
import { tabbarStore } from './tabbar'
import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy, TABBAR_MAP } from './tabbarList'

// i-carbon-apps
// i-carbon-location
// i-carbon-user
// i-carbon-home
const customTabbarEnable
  = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
    || selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE

/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabBarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
console.log(tabbarList)
function selectTabBar(index: number) {
  const url = tabbarList[index].path
  tabbarStore.setCurIdx(index)
  if (cacheTabbarEnable) {
    uni.switchTab({ url })
  }
  else {
    uni.navigateTo({ url })
  }
}

onLoad(() => {
  // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
  const hideRedundantTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
  hideRedundantTabbarEnable
  && uni.hideTabBar({
    fail(err) {
      console.log('hideTabBar fail: ', err)
    },
    success(res) {
      console.log('hideTabBar success: ', res)
    },
  })
})
</script>

<template>
  <view v-if="tabbarStore.customTabbarEnable ? customTabbarEnable : false " class="custom-tabbar">
    <view class="tabbar-container">
      <view
        v-for="(item, idx) in tabbarList" :key="item.path" class="tabbar-item"
        :class="{ 'is-active': idx === tabbarStore.curIdx }" @click="selectTabBar(idx)"
      >
        <!-- 特殊处理最后一个"我的"项 -->
        <view v-if="idx === tabbarStore.curIdx" class="my-active-wrapper">
          <view class="my-active-container">
            <image :src="item.selectedIconPath" mode="aspectFit" class="mr-9px h-60rpx w-60rpx" />
            <text class="tabbar-text">
              {{ item.text }}
            </text>
          </view>
        </view>
        <!-- 普通项 -->
        <template v-else>
          <image :src="item.iconPath" mode="aspectFit" class="h-60rpx w-60rpx" />
        </template>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #1a1a1a;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #333333;
}

.tabbar-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 70px;
  padding: 0 12px;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;

  .tabbar-text {
    font-family:
      Alibaba PuHuiTi 2,
      Alibaba PuHuiTi 20;
    font-weight: 600;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;

    white-space: nowrap;
  }
}

// "我的" 激活状态的特殊样式
.my-active-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.my-active-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 25px;
  padding: 8px 24px;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);

  .tabbar-text {
    font-family:
      Alibaba PuHuiTi 2,
      Alibaba PuHuiTi 20;
    font-weight: 600;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;

    white-space: nowrap;
  }
}
</style>
